<template>
  <!-- id="MapView" -->
  <div>
    <div id="viewDiv"></div>    
    <!-- 工具条组件 -->
    <ToolBar 
      @measurement="measurement"
      @baseMapChange="baseMapChange"
      @draw="draw"
      @showLegend="showLegend"
      @showLayerList="showLayerList" 
      @showScale="showScale"    
    ></ToolBar>
    <!-- <WebMap /> -->  
    <!-- <WebMapControl /> -->
  </div>
</template>

<script>
import map from "@/map/map.js";
import ToolBar from "../components/WebMapToolBar";
//import Measurement from "@/components/Measurement.vue"; // 测量组件
import ArcGIS from "@/map/index.js";
const Map = new ArcGIS();

// import WebMap from "../components/WebMap";
// import WebMapControl from "../components/WebMapControl";

import { loadModules } from "esri-loader";
export default {
  name: "Index",
  components: {
    ToolBar,
    // WebMap,
    // WebMapControl,
  },

  props: {},

  data() {
    return {};
  },

  created() {},

  mounted() {
    //调用本页面中的创建地图的方法
    //this.creatMapView();
    //调用简单封装的地图模块（src/map/map.js）
    map.createMap().then(()=>{
      console.log("地图加载完毕")
    })

     //Map.init("viewDiv");
  },

  methods: {
    //创建二维map
    creatMapView: function () {
      loadModules([
        //这里根据自己的需要引入需要用到的模块
        // "esri/tasks/Locator",
        "esri/Map",
        "esri/views/MapView", //2D地图引入，3D使用screenView
        "esri/layers/TileLayer", //地图图层可以使用这个类来添加
        "esri/layers/MapImageLayer",
        "esri/geometry/Extent",
        //"esri/layers/FeatureLayer",//自定义的图层
        "esri/Graphic", //图像，点线面等
        //"esri/layers/GroupLayer",
        // "esri/widgets/LayerList",
        "esri/widgets/Fullscreen", //全屏小部件
        "esri/widgets/Zoom", //放大缩小部件
        "dojo/domReady!",
      ]).then(
        ([
          Map,
          MapView,
          MapImageLayer,
          ArcGISDynamicMapServiceLayer,
          ArcGISTiledMapServiceLayer,
          SpatialReference,
          Extent,
          TileLayer,
          Graphic,
          Fullscreen,
          Zoom,
        ]) => {
          var extent = new Extent(
            107.00648910571951,
            36.34566301198689,
            107.22182447958639,
            36.542234722570775
          );
          //自定义的地图服务 吐哈油田
          const dyServer =
            "https://www.igiseis.com:6443/arcgis/rest/services/TuhaService/GISMap_Obstacle/MapServer";
          //加载地图服务
          // 不存在缓存 ， 则用ArcGISDynamicMapServiceLayer
          var myTiledMapServiceLayer = new ArcGISDynamicMapServiceLayer(
            dyServer
          );
          const map = new Map({
            basemap: "topo", //地图样式 topo streets hybrid
            layers: [myTiledMapServiceLayer], //低图的图层，我这里加入的是上一步定义的图层
          });
          const mapview = new MapView({
            map: map, //绘制的地图
            container: "MapView", //绘制地图的ID
            center: [107.00648910571951, 36.34566301198689],
            zoom: 10,
          });
          function locusThis() {
            //上面自定义的操作点击后的执行函数
            mapview.popup.open({
              title: "时间选择",
              content: "1111",
            });
            //   template.content.push();
            //   mapview.graphics.polylineGraphic.popupTemplate = template;
          }
          //关闭自动打开弹窗
          // mapview.popup.autoOpenEnabled = false;
          mapview.popup.on("trigger-action", function (event) {
            //设置点击操作触发条件
            if (event.action.id === "locus") {
              locusThis();
            }
          });
        },
        (reason) => {
          console.log(reason);
        }
      );
    },
        /* 地图切换 */
    baseMapChange(command) {
        console.log("baseMapChange===" +command)
        map.baseMapChange(command);
    },
    measurement(command){
      console.log("measurement===" +command)
    },
    draw(command){
      console.log("draw===" +command)
    },
    showLegend(command){
      console.log("showLegend===" +command)
    },
    showLayerList(command){
      console.log("showLayerList===" +command)
    },
    showScale(command){
      console.log("showScale===" +command)
    }

  },
};
</script>
<style>
#MapView {
  position: absolute;
  width: 100%;
  height: 100vh;
}
</style>
